const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry:"./src/index.js", // 这里应用程序开始执行 webpack 开始打包
  mode: "develop", // "production" | "development" | "none"
  module: { // 模块配置相关(决定了如何处理项目中的 不同类型的模块)
  	rules: [ // 模块规则(配置 loader、解析器等选项)
      // Rule 每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)
      {
        /* 条件(condition) START */
        test: /\.(js|jsx)$/, 
        exclude: /(node_modules|bower_components)/, //排除所有符合条件的模块
        /* 条件(condition) END */

        /* 结果(result) START */
        loader:"babel-loader", //Rule.use: [ { loader } ] 的简写
        options: {presets: ["@babel/env"]} //loader的option
        /* 结果(result) END */
      },
      {
        /* 条件(condition) START */
        test:/\.css$/,
        /* 条件(condition) END */

        /* 结果(result) START */
        use:["style-loader","css-loader"]
        /* 结果(result) END */
      }
    ]
  },
  resolve: { //配置模块如何解析。
    extensions: ["*",".js",".jsx"] //尝试按顺序解析这些后缀名
    //如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
    //能够使用户在引入模块时不带扩展
  },
  output: {  // webpack 如何输出结果的相关选项
    path: path.resolve(__dirname,"dist/"), // 所有输出文件的目标路径
    // 必须是绝对路径（使用 Node.js 的 path 模块）
    publicPath:"/dist/", // 输出解析文件的目录，url 相对于 HTML 页面
    filename:"bundle.js" // entry chunk 的文件名模板
  },
  devServer: {
    port: 3000 , //端口
    static: [{
      directory: path.join(__dirname, 'public'),
    }],
    hot: "only",
    client: { //在浏览器中以百分比显示编译进度。
      progress: true,
    },
  },
  plugins:[new webpack.HotModuleReplacementPlugin()]
}